<template>
  <Header />
  <CarouselChart v-if="route.path === '/'"></CarouselChart>

  <div class="container">
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component
          :is="Component"
          v-if="route.meta.keepAlive"
          :key="route.name"
        ></component>
      </keep-alive>
      <component
        :key="route.name"
        :is="Component"
        v-if="!route.meta.keepAlive"
      ></component>
    </router-view>
  </div>
  <el-backtop :bottom="50">
    <div class="all-top">
      <el-icon><Top /></el-icon>
    </div>
  </el-backtop>
  <!-- <img
    class="bg_"
    :src="bgArr[Math.floor(Math.random() * bgArr.length + 1)]"
    alt=""
  /> -->
</template>

<script setup lang="ts">
import { onMounted, KeepAlive } from "vue";
import { Top } from "@element-plus/icons-vue";
import Header from "@/components/Header/Header.vue";
import CarouselChart from "@/components/CarouselChart/CarouselChart.vue";
import { useRoute } from "vue-router";
import { bgArr } from "@/utils/config";
const route = useRoute();
onMounted(() => {
  document.body.style.setProperty("--el-color-primary", "#1E80FF");
  document.body.style.setProperty("--el-color-primary-light-3", "#1171EE");
});
</script>

<style>
.container {
  position: relative;
  max-width: 1024px;
  width: 100%;
  height: 100%;
  margin: auto;
  transition: all 0.3s linear;
  display: flex;
}
.all-top {
  height: 100%;
  width: 100%;
  background-color: var(--el-bg-color-overlay);
  box-shadow: var(--el-box-shadow-lighter);
  text-align: center;
  line-height: 40px;
  color: #1989fa;
}
.bg_ {
  position: fixed;
  top: 0%;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  /* width: 100%; */
  /* height: 100%; */
  object-fit: cover;
}
::-webkit-scrollbar {
  /* display: none; */
  width: 5px;
  border-radius: 10px;
}
body::-moz-selection {
  display: none;
}
.el-image-viewer__close {
  top: 60px !important;
}
::-webkit-scrollbar-thumb {
  background-color: #ccc;
}
.vuepress-markdown-body {
  overflow-y: hidden;
}
</style>
